<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		#webcam{
			width:300px;
			height:300px;
			border:1px solid green;
		}
		#XwebcamXobjectX{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div id="webcam"></div>
	<div id="status"></div>
	<script data-main="js/index" src="js/require.js"></script>
	<script src="js/jquery-1.12.1.js"></script>
	<script src="js/jquery.webcam.js"></script>
	<script>

		$(function(){
			alert("33");
			$("#webcam").webcam({

				width: 320,
				height: 240,
				mode: "callback",
				swffile: "./js/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller

				onTick: function(remain) {

					if (0 == remain) {
						jQuery("#status").text("Cheese!");
					} else {
						jQuery("#status").text(remain + " seconds remaining...");
					}
				},

				onSave: function(data) {

					var col = data.split(";");
			    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
				},

				onCapture: function () {
					webcam.save();

			 	  // Show a flash for example
				},

				debug: function (type, string) {
					// Write debug information to console.log() or a div, ...
				},

				onLoad: function () {
			    // Page load
					var cams = webcam.getCameraList();
					for(var i in cams) {
						jQuery("#cams").append("<li>" + cams[i] + "</li>");
					}
				}
			});
		})
	</script>
</body>
</html>